import React from 'react';
import '../DeliveryList/DeliveryDetail.css'
import {Table,Pagination} from 'antd'
import {observer,inject} from 'mobx-react'
import axios from '../../../utils/http'
import * as api from '../../../utils/api'

@inject('curOrder')
@observer
class RefundList extends React.Component {
    constructor(){
        super()
        this.state={
            columns:[
                {
                    title:'发货单流水号',
                    dataIndex:'invoiceSernum',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {record.invoice.invoiceSernum}
                            </div>
                        )
                    }
                },
                {
                    title:'订单号',
                    dataIndex:'orderNum',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {record.orders.orderCode}
                            </div>
                        )
                    }
                },
                {
                    title:'下单时间',
                    dataIndex:'orderOt',
                    align:'center',
                    render:(text,record,index)=>{
                        console.log(record.orders.orderOt)
                        return(
                            <div>
                                {new Date(record.orders.orderOt).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}
                            </div>
                        )
                    }
                },
                {
                    title:'退款时间',
                    dataIndex:'refundTime',
                    align:'center',
                    render:(text,record,index)=>{
                        console.log(record.orders.orderOt)
                        return(
                            <div>
                                {new Date(record.orders.orderOt).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}
                            </div>
                        )
                    }
                },
                {
                    title:'收货人',
                    dataIndex:'harvestPeople',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {record.memLocations.memName}
                            </div>
                        )
                    }
                },
                {
                    title:'发货时间',
                    dataIndex:'invoiceDt',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {new Date(record.invoice.invoiceDt).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}
                            </div>
                        )
                    }
                },
                {
                    title:'发货单状态',
                    dataIndex:'fahuoState',
                    align:'center',
                    render:(text,record,index)=>{
                        let faHuoStateNum = record.invoice.invoiceStatus
                        switch(faHuoStateNum){
                            case 0: faHuoStateNum = '未发货';break;
                            case 1: faHuoStateNum = '发货中';break;
                            default: faHuoStateNum = '已发货';
                        }
                        return(
                            <div>
                                {faHuoStateNum}
                            </div>
                        )
                    }
                },
                {
                    title:'发货操作人',
                    dataIndex:'operateMan',
                    align:'center',
                },
                {
                    title:'退款操作人',
                    dataIndex:'refmgtOperator',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {record.refmgt.refmgtOperator}
                            </div>
                        )
                    }
                },
            ],
            data:[
                {
                    key:0,
                    fahuodanId:0,
                    fahuodanliushuihao:'2017081157525010',
                    orderNum:'2017081157525010',
                    xiaDanTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    harvestPeople:'杨雪',
                    fahuoTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    fahuoState:'已发货',
                    operateMan:'admin',
                    refundTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),//退款时间
                    refundManPeople:'快乐的小鸟'
                },
                {
                    key:1,
                    fahuodanId:1,
                    fahuodanliushuihao:'2017081157525010',
                    orderNum:'2017081157525010',
                    xiaDanTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    harvestPeople:'杨雪',
                    fahuoTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    fahuoState:'已发货',
                    operateMan:'admin',
                    refundTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),//退款时间
                    refundManPeople:'快乐的小鸟'
                },
                {
                    key:2,
                    fahuodanId:2,
                    fahuodanliushuihao:'2017081157525010',
                    orderNum:'2017081157525010',
                    xiaDanTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    harvestPeople:'杨雪',
                    fahuoTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    fahuoState:'已发货',
                    operateMan:'admin',
                    refundTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),//退款时间
                    refundManPeople:'快乐的小鸟'
                },
                {
                    key:3,
                    fahuodanId:3,
                    fahuodanliushuihao:'2017081157525010',
                    orderNum:'2017081157525010',
                    xiaDanTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    harvestPeople:'杨雪',
                    fahuoTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    fahuoState:'已发货',
                    operateMan:'admin',
                    refundTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),//退款时间
                    refundManPeople:'快乐的小鸟'
                },
            ],
            curPageData:[],
            curPage:1,
            curPageSize:3,
        }
    }
    componentDidMount(){
        // 向后台请求退货单列表的数据
        axios({
            url:api.GET_QUERYRETURNGOODS,
            method:'GET',
        }).then(data=>{
            console.log(data.data.data)
            let dataArr = data.data.data
            dataArr = dataArr.map((item,i)=>{
                item.key = i+1
                return item
            })
            let curPage = 1
            let curPageSize = 3
            let start = (curPage-1)*curPageSize
            let end = start + curPageSize
            let curPageData = dataArr.slice(start,end)
            this.setState({
                curPage:curPage,
                curPageSize:curPageSize,
                curPageData:curPageData,
                data:dataArr
            })
        })

        // console.log(this.state.data)
        
    }

  //奇偶行的样式
  getRowClassName = (record, index) => {
    let className = '';
    className = index % 2 === 0 ? 'oddRowStyle' : 'evenRowStyle';
    return className;
  }   
  // 页码改变的时候   
  pageNumChange = (page,pageSize)=>{
    let start = (page-1)*this.state.curPageSize
    let end = start + this.state.curPageSize
    let curPageData = this.state.data.slice(start,end)
    this.setState({
        curPage:page,
        curPageData:curPageData
    })
  }
 //跳到首页
 toPageStart = ()=>{
    let curPage = 1
    let start = (curPage-1)*this.state.curPageSize
    let end = start + this.state.curPageSize
    let curPageData = this.state.data.slice(start,end)
    this.setState({
        curPage:curPage,
        curPageData:curPageData
    })
 }   
// 跳转到尾页
toPageEnd = ()=>{
    let totalPage = Math.ceil(this.state.data.length/this.state.curPageSize)
    let start = (totalPage-1)*this.state.curPageSize
    let end = start + this.state.curPageSize
    let curPageData = this.state.data.slice(start,end)
    this.setState({
        curPage:totalPage,
        curPageData:curPageData
    })
}


    render(){
        return (
                <div className="deliveryBox">
                    <h1>退货单列表</h1>
                    {/*  筛选查询  */}
                    {/* <div className="searchClass toInlineBlock">
                        <label className="teshuLabelClass">发货单流水号 <input type="text" name="teamNum"/></label>
                        <label>订单号 <input type="text" name="teamNum"/></label>
                        <label>收货人 <input type="text" name="teamNum"/></label>

                        发货单状态
                        <select name="" id="">
                            <option value="1">请选择</option>
                            <option value="2">正常</option>
                            <option value="3">已发货</option>
                        </select>
                        <button type="button" className="searchBtn">搜索</button>
                    </div> */}

                    <Table columns={this.state.columns} dataSource={this.state.curPageData} pagination={false} rowClassName={this.getRowClassName}/>

                    <div className="pagenationbox clearFloat">
                        <div className='pageNation'>
                            <div className='clearFloat'>
                                <div className='floatLeft'>
                            <Pagination
                                className='purpleTxt'
                                total={this.state.data.length}
                                defaultCurrent={this.state.curPage}
                                defaultPageSize={this.state.curPageSize}
                                current={this.state.curPage}
                                showTotal={total => `共${Math.ceil(this.state.data.length/this.state.curPageSize)}页${total}条记录`}
                                onChange={this.pageNumChange}
                            />
                        </div>
                                <div className="pageBtnBox">
                                    <span className="checkBtn" onClick={this.toPageStart}>首页</span>
                                    <span className="checkBtn" onClick={this.toPageEnd}>尾页</span>
                                </div>
                            </div>
                        </div>
                              </div>
                        </div>
            );
    }
}
export default RefundList;